<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title name="注册">注册</title>
    <link rel="stylesheet" href="../styles/bootstrap.css" />
    <link rel="stylesheet" href="../styles/main.css" />
    <link rel="stylesheet" href="../styles/regist.css" />
  </head>
  <body>
    <div class="navbar navbar-expand-sm pt-0 pb-0 bg-light mb-4">
      <div class="container p-0">
        <div class="navbar-brand pt-0 pb-0 m-0 fl">
          <a href="../pages/index.html">
            <img src="../images/logo.png" alt="" />
          </a>
        </div>
        <label id="menu" class="d-block d-sm-none" for="toggle-list">menu</label>
        <input id="toggle-list" class="d-none" type="checkbox" />
        <div class="d-none d-sm-block w-100">
          <ul class="navbar-nav fl">
            <li class="navbar-item"><a href="./index.html" class="navbar-link">首页</a></li>
          </ul>
          <ul class="navbar-nav fr">
            <li class="navbar-item"><a href="#" class="navbar-link">我的订单</a></li>
            <li class="navbar-item"><a href="#" class="navbar-link">收藏夹</a></li>
            <li class="navbar-item"><a href="./login.html" class="navbar-link">登录</a></li>
            <li class="navbar-item active"><a href="./regist.html" class="navbar-link">注册</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="container-small mt-5">
      <h3 class="mb-3">注册 <small>已有账号?<a href="./login.html">登录</a></small></h3>
      <form>
        <div class="form-group">
          <label>用户名</label>
          <input data-rule='pattern:"^[\u4e00-\u9fa5_a-zA-Z0-9]*$"|maxlength:16|minlength:2'
                 name="name"
                 class="form-control"
                 type="text" />
        </div>
        <div id="name-error" class="form-group">
          用户名格式有误
        </div>
        <div class="form-group">
          <label>密码</label>
          <input data-rule='pattern:"^[a-zA-Z0-9@.]*$"|maxlength:20|minlength:6'
                 name="password"
                 class="form-control"
                 type="password" />
        </div>
        <div id="password-error" class="form-group">
          密码格式有误
        </div>
        <div class="form-group">
          <label>手机号</label>
          <div class="row m-0">
            <input data-rule='pattern:"^[0-9]*$"|maxlength:11|minlength:11'
                   name="phone"
                   class="form-control col-9"
                   type="text" />
            <button class="btn btn-danger col-3">发送验证码</button>
          </div>
        </div>
        <div id="phone-error" class="form-group">
          手机号格式有误
        </div>
        <div class="form-group">
          <label>验证码</label>
          <input data-rule='pattern:"^[a-zA-Z0-9]*$"|maxlength:4|minlength:4'
                 name="number"
                 class="form-control"
                 type="text" />
        </div>
        <div id="number-error" class="form-group">
          验证码错误
        </div>
        <button id="login" class="btn btn-danger btn-block mt-4">注册</button>
      </form>
    </div>
    <div class="footer d-none d-sm-block bg-light">
      <div class="messages">
        <a href="#">联系我们</a>
        <a href="#">招聘信息</a>
        <a href="#">商家入驻</a>
        <a href="#">商家后台</a>
      </div>
      <div class="details">
        营业执照注册号：330106000004 |
        网络文化经营许可证：浙网文（2016）0349-21号 |
        增值电信业务经营许可证：B2-2011049 |
        安全责任书 |
        浙公网安备 33010602009号
      </div>
    </div>
    <script src="../lib/jquery.js"></script>
    <script src="../scripts/validator.js"></script>
    <script src="../scripts/input.js"></script>
    <script src="../scripts/main.js"></script>
  </body>
</html>
